<template>
    <div id="list-two">
        <h2>框架排名（组件two）</h2>
        <ul>
            <li v-for="(frame,index) in varyFrames" :key="index">
                <span class="name">{{frame.name}}</span>
                <span class="star">热度：{{frame.star}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'list-two',
  //   props: ['frames']
  computed: {
    frames: function () {
      return this.$store.state.frames
    },
    varyFrames: function () {
      return this.$store.getters.varyFrames
    }
  }
}
</script>

<style scoped>
    #list-two{
        background: #b7fcff;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        margin-bottom: 30px;
        padding: 10px 20px;
    }
    #list-two ul{
        padding: 0;
        list-style-type: none;
    }
    #list-two li{
        margin-right: 10px;
        margin-top: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.7);
    }
    .star{
        font-weight: bold;
        color: #2618e8;
        display: block;
    }
</style>
